<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      /*
        props做子传父:
          - 因为props是单向数据流,子组件不能直接修改父组件数据
          - 并且state数据也是组件私有的,只能自己修改
          - 父组件可以封装一个方法,专门修改自己的数据,然后把方法通过props的方式传递给子组件
          - 子组件可以在需要的时候,调用父组件传递过来的方法,修改父组件的数据

        单向数据流:
          * 什么是数据流?数据在组件之间的传递
          * 什么是单向数据流?数据在某个组件被改动以后,只会影响一个方向的上的其他组件(react的方向是从上到下)
          * 单向数据流的定义:规范数据的流向,数据由外层组件向内层组件进行传递和更新
      */
      class Child extends React.Component {
        render() {
          const { car, changeCar } = this.props;
          return (
            <div>
              <h3>我是儿子 我开的车是{car}</h3>
              <button onClick={changeCar}>点我换车</button>
            </div>
          );
        }
      }
      class App extends React.Component {
        state = {
          car: "宝马",
        };
        render() {
          const { car } = this.state;
          return (
            <div>
              <h2>我是父亲 我开的是{car}</h2>
              <hr />
              <Child car={car} changeCar={this.changeCar} />
            </div>
          );
        }
        changeCar = () => {
          this.setState({
            car: "沃尔沃",
          });
        };
      }

      ReactDOM.createRoot(document.getElementById("app")).render(<App />);
    </script>
  </body>
</html>
